<template>
  <div class="table-fenlei-list">
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column prop="id" label="序号" sortable />
      <el-table-column prop="name" label="分类名称" sortable />
      <el-table-column prop="isValid" label="是否有效" sortable />
      <el-table-column prop="sort" label="排序" sortable />
      <el-table-column prop="caozuo" label="操作" sortable />
    </el-table>
  </div>
</template>
<script lang="ts" setup>
interface User {
  id: number;
  date: string;
  name: string;
  hasChildren?: boolean;
  children?: User[];
}
const tableData: User[] = [
  {
    id: 1,
    date: "2016-05-02",
    name: "海外购",
    children: [
      {
        id: 12,
        date: "12",
        name: "国际名牌",
        children: [
          {
            id: 12,
            date: "12",
            name: "国际名牌",
          },
          {
            id: 12,
            date: "12",
            name: "国际名牌",
          },
          {
            id: 12,
            date: "12",
            name: "国际名牌",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    date: "2016-05-04",
    name: "我真帅",
  },
  {
    id: 3,
    date: "2016-05-01",
    name: "我真帅",
    children: [
      {
        id: 31,
        date: "2016-05-01",
        name: "我真帅",
      },
      {
        id: 32,
        date: "2016-05-01",
        name: "我真帅",
      },
    ],
  },
  {
    id: 4,
    date: "2016-05-03",
    name: "我真帅",
  },
];

const tableData1: User[] = [
  {
    id: 1,
    date: "2016-05-02",
    name: "我真帅",
  },
  {
    id: 2,
    date: "2016-05-04",
    name: "我真帅",
  },
  {
    id: 3,
    date: "2016-05-01",
    name: "我真帅",
    hasChildren: true,
  },
  {
    id: 4,
    date: "2016-05-03",
    name: "我真帅",
  },
];
</script>
<style scoped>
.table-fenlei-list {
  width: 100%;
  height: 100%;
}
</style>